<template>
  <div class="com-container">
    <div class="com-chart" ref="hotRef"></div>
    <span class="iconfont left" :style="commonStyle" @click="go('lift')"
      >&#xe6ef;</span
    >
    <span class="iconfont right" :style="commonStyle" @click="go('right')"
      >&#xe6ed;</span
    >
    <span class="cat-name" :style="commonStyle">{{ catTitle }}</span>
  </div>
</template>

<script>
// import { getHotData } from '@/api/hot'
import { getTheme } from '@/utils/theme_utils' // 引入切换主题的工具
import { mapState } from 'vuex'
export default {
  data () {
    return {
      timerId: null,
      echartInstance: null, // 实例化图表
      allData: null, // 保存数据
      currentIndex: 0, // 切换的页面
      titleFontSize: 0 // 标题的大小
    }
  },
  created () {
    this.$socket.registerCallBack('hotData', this.getData) // 后端向前端推送数据
  },
  computed: {
    ...mapState(['theme']), // 扩展运算符
    commonStyle () { // 动态设置大小
      return {
        fontSize: this.titleFontSize + 'px',
        color: getTheme(this.theme).titleColor
      }
    },
    catTitle () { // 动态设置标题
      if (!this.allData) return ''
      return this.allData[this.currentIndex].name
    }
  },
  watch: {
    theme () { // 监听计算属性
      this.echartInstance.dispose() // 销毁之前的echarts实例
      this.initChart() // 重新创建echarts实例
      this.screenAdapter() // 重新进行屏幕适配
      this.updateChart() // 重新绘制图表
    }
  },
  mounted () {
    this.initChart()
    this.$socket.send({ // 实现多端联动效果
      action: 'getData',
      chartName: 'hot',
      socketType: 'hotData',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter) // 这里做屏幕适配的效果
    this.screenAdapter()
  },
  destroyed () { // 销毁
    window.removeEventListener('resize', this.screenAdapter)
    this.$socket.unRegisterCallBack('hotData')
  },
  methods: {
    initChart () {
      this.echartInstance = this.$echarts.init(this.$refs.hotRef, this.theme)
      const initOption = {
        title: {
          text: '▎热销商品的占比',
          left: '20',
          top: '20'
        },
        legend: {
          top: '15%',
          icon: 'circle'
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            left: '10%',
            right: '10%',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          }
        ]
      }
      this.echartInstance.setOption(initOption)
    },
    // 获取数据
    // async getData () {
    getData (res) {
      this.allData = res
      this.updateChart()
    },
    // 更新图表
    updateChart () {
      const data = this.allData && this.allData[this.currentIndex].children
      const legendData =
        this.allData &&
        this.allData[this.currentIndex].children.map(item => item.name)
      const dataOption = {
        legend: {
          data: legendData
        },
        tooltip: {
          formatter: arg => {
            let str = ''
            arg.data.children.forEach(item => {
              str += `${item.name}：${Math.round(
                (item.value / arg.data.value) * 100
              )}%<br/>`
            })

            return str
          }
        },
        series: [
          {
            data,
            radius: [0, this.titleFontSize * 3]
          }
        ]
      }
      this.echartInstance.setOption(dataOption)
    },
    go (str) { // 整合方法
      if (str === 'left') {
        this.currentIndex <= 0 ? this.currentIndex = this.allData.length - 1 : this.currentIndex--
      } else {
        this.currentIndex >= this.allData.length - 1 ? this.currentIndex = 0 : this.currentIndex++
      }
      this.updateChart()
    },
    screenAdapter () {
      this.titleFontSize = (this.$refs.hotRef.offsetWidth / 100) * 3.6
      const adapterOption = { // 做屏幕适配
        title: {
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize,
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
        series: [
          {
            radius: [0, this.titleFontSize * 2.5]
          }
        ]
      }
      this.echartInstance.setOption(adapterOption)
      this.echartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>
.left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.cat-name {
  position: absolute;
  right: 10%;
  bottom: 10%;
  color: white;
}
</style>
